<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单和v-model</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>input ==> v-model ==>@input</h1>
        <P>一般用v-model来进行实时更新</P>
        <input type="text" v-model="message" placeholder="输入。。。">

        <br><hr><br>
        <p>总是希望实时更新，就用@input，用下面的输入框</p>
        <input type="text" @input="inputs" placeholder="输入。。。">
        <p>输入的内容为：{{message}}</p>
        <br><hr><br>

        <h1>radio==> :checked="方法"</h1>
        <p>基本</p>
        <input type="radio" :checked="picked">选中
        <br><hr><br>

        <p>radio组的选择,这个时候可以一组input radio 都用相同的v-model的变量，并指定value的值</p>
        <input type="radio" v-model="pickedmul" value="html" id="html"><label for="html">html</label>
        <br>
        <input type="radio" v-model="pickedmul" value="js" id="js"><label for="js">js</label>
        <br>
        <input type="radio" v-model="pickedmul" value="css" id="css"><label for="css">css</label>
        <p>你选择了{{ pickedmul }}</p>

        <br><hr><br>

        <h1>checkbox => v-model 多个checkbox的值必须为数组 </h1>

        <input type="checkbox" v-model ="checked" id="checked">
        <label for="checked">选择状态{{checked}}</label>

        <br><hr><br>
        <input type="checkbox" v-model ="check" value="apple" id="apple">
        <label for="apple">apple</label>
        <input type="checkbox" v-model ="check" value="banana" id="banana">
        <label for="banana">banana</label>
        <input type="checkbox" v-model ="check" value="tomato" id="tomato">
        <label for="tomato">tomato</label>
        <p>你选择了：{{check}}</p>

        <br><hr><br>

        <h1>selected ==>v-model </h1>

        <select v-model="selecteds" >
            <option disabled=true value = "请选择" selected="selected">请选择</option>
            <option>html</option>
            <option value="js">javascript</option>
            <option>css</option>
        </select>
        <p>你选择的项为：{{selecteds}}</p>
        <br><hr><br>

            <select v-model="mul"  multiple>
                <option value="js">js</option>
                <option value="html">html</option>
                <option value="css">css</option>
                <option value="java">java</option>
                <option value="vue">vue</option>
            </select>
            <p>你选择了{{mul}}</p>
        <br><hr><br>

        <select id = "sel" multiple> 
            <option value = "1" >1 
            <option value ="2" selected = "selected" >2 
            <option value = "3" >3 
            </select>
        
            <br><hr><br>

        <select name="" id="" v-model="sel">
            <option v-for="value in options" :value="value">{{value}}</option>
        </select>
        <p>你选择了{{sel}}</p>

        <br><hr><br>

        <h1>动态绑定值</h1>
        <h3>radio,其中 <b>“value”</b> 是vue定义的参数</h3>
        <input type="radio" v-model="checks" :value="value" id="dt">
        <label for="dt">动态绑定</label>
        <p>{{checks}}</p>
        <p>{{value}}</p>

        <h3>checkbox,其中 <b>true-value,false-value</b> 是vue定义的参数</h3>
        <input type="checkbox" v-model = "checkvalue" :true-value="val1" :false-value="val2">
        <p>{{checkvalue}}</p>
        <p>{{val1}}</p>
        <p>{{val2}}</p>

        <h1>修饰符 .lazy: 会转变为change事件中同步,.number: 可以转换为Number类型,.trim: 去除value的首尾空格</h1>
        <input v-model.lazy="message">
        <p>{{message}}</p> 
        <input type="number" v-model.number="message">
        <p>{{message}}</p> 
        <input type="text" v-model.trim="message">
        <p>{{message}}</p> 

    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'',
                picked :false,
                pickedmul: 'js',
                checked:true,
                check:[],
                selecteds:'',
                options:[1,2,3,4,5],
                sel:'',
                mul:['js','java'],
                checks:true,
                value:123,
                checkvalue:false,
                val1:'a',
                val2:'b'
            },
            methods:{
                inputs:function(e){
                    this.message=e.target.value;
                }
            }
        })
    </script>
    
</body>
</html>